<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="状态">
          <el-select
            v-model="filter.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option v-for="(data,i) in status" :key="i" :label="data" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="methods">
          <el-select
            v-model="filter.method_type"
            placeholder="请选择method"
            clearable
          >
            <el-option v-for="(data,i) in method_types" :key="i" :label="data" :value="data"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块报告ID">
          <el-input
            v-model="filter.test_module_id"
            placeholder="模块报告ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="接口ID">
          <el-input
            v-model="filter.api_id"
            placeholder="接口ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="接口名称">
          <el-input
            v-model="filter.api_name"
            placeholder="接口名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="api">
          <el-input
            v-model="filter.api"
            placeholder="原始api"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="path">
          <el-input
            v-model="filter.path"
            placeholder="path"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="domain">
          <el-input
            v-model="filter.domain"
            placeholder="domain"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input
            v-model="filter.test_report_uid"
            placeholder="测试单唯一标识"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table v-loading="dataLoading" :data="dataList" :height="height" border>
        <el-table-column label="ID" width="180">
          <template slot-scope="scope">
            <div><b>ID:</b>{{scope.row.id}}</div>
            <div class="goto" @click="goTestReports(scope.row)"><b>测试唯一标识:</b>{{scope.row.test_report_uid}}</div>
          </template>
        </el-table-column>
        <el-table-column label="接口" min-width="200">
          <template slot-scope="scope">
            <div ><b>api_name：</b>{{scope.row.api_name}}</div>
            <div ><b>api：</b>{{scope.row.api}}</div>
            <div ><b>path：</b>{{scope.row.path}}</div>
            <div ><b>domain：</b>{{scope.row.domain}}</div>
            <div ><b>method：</b>{{scope.row.method_type}}</div>
            <div class="goto" @click="goApis(scope.row)"><b>apiID：</b>{{scope.row.api_id}}</div>
            <div ><b>===================</b></div>
            <div><b>开发组:</b>{{scope.row.testModule.cate_name || ''}}</div>
            <div><b>项目:</b>{{scope.row.testModule.project_name || ''}}</div>
            <div><b>产品:</b>{{scope.row.testModule.product_name || ''}}</div>
            <div><b>主模块:</b>{{scope.row.testModule.f_module_name || ''}}</div>
            <div class="goto" @click="goTestModule(scope.row)"><b>子模块:</b>{{scope.row.testModule.s_module_name || ''}}</div>
          </template>
        </el-table-column>
        <el-table-column label="请求头"  min-width="250">
          <template slot-scope="scope">
            <json-viewer
              :value="scope.row.headers"
              :expand-depth=5
              copyable
              boxed
              sort></json-viewer>
          </template>
        </el-table-column>
        <el-table-column label="数据" min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goTestParam(scope.row)"><b>测试用例数：</b>{{scope.row.test_param_sun}}</div>
            <div class="goto" @click="goTestParam(scope.row)"><b>通过用例数：</b>{{scope.row.success_param_sun}}</div>
            <div  class="goto" @click="goTestParam(scope.row)"><b>总共执行验证器:</b>{{scope.row.test_validator_sum}}</div>
            <div class="goto" @click="goTestParam(scope.row)"><b>成功通过验证器:</b>{{scope.row.success_validator_sum}}</div>
            <div ><b>状态：</b>{{scope.row.status_label}}</div>
          </template>
        </el-table-column>
        <el-table-column label="时间/人" min-width="200">
          <template slot-scope="scope">
            <div><b>测试时间:</b>{{scope.row.tested_at}}</div>
            <div><b>测试人:</b>{{scope.row.test_adminer || ''}}</div>
            <div><b>创建时间:</b>{{scope.row.created_at}}</div>
            <div><b>创建人:</b>{{scope.row.created_adminer || ''}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/runTest/testApisApi' // API接口
export default {
  name: 'testApis',
  data() {
    return {
      height:this.$baseTableHeight(1),
      status:{},
      method_types:{},
      filter: {
        id:"",
        page: 1,
        api_id:"",
        pageSize: 10,
        total: 0,
        path:"",
        domain:"",
        method_type:"",
        created_adminer:"",
        updated_adminer:"",
        test_module_id: '',
        api_name:"",
        status: "",
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      topStatus:0,
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    this.filter.id = this.$route.query.test_api_id || null
    this.filter.test_report_uid = this.$route.query.test_report_uid || null
    this.filter.test_module_id = this.$route.query.test_module_id || null
    this.filter.api_id = this.$route.query.api_id || null
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      api.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.filter.total = res.data.total
        this.method_types = res.data.method_type_maps
        this.status = res.data.status_maps
        this.dataLoading = false
      })
    },
    goHost(data) {
      this.$router.push({path:'/env/hostList',query:{host_env_id:data.id}});
    },
    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    goTestModule(data) {
      this.$router.push({path:'/runTest/testModules',query:{test_module_id:data.test_module_id}});
    },
    goTestReports(data) {
      this.$router.push({path:'/runTest/testReports',query:{test_report_uid:data.test_report_uid}});
    },
    goTestParam(data) {
      this.$router.push({path:'/runTest/testParamRes',query:{test_api_id:data.id}});
    },
    goApis(data) {
      this.$router.push({path:'/api/apiList',query:{api_id:data.api_id}});
    },
  },

}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


